<template>
	<div>
		<div class="header">
			<div class="icon-left" @click="$router.goBack()"><img src="../../static/img/icon/release_icon/return@2x.png"/></div>
			更多评论
			<div></div>
		</div>
		<div class="header-null"></div>
		<div class="more-header">
			<img src="../../static/img/icon/find_icon/comment@2x.png"/>
			<div>全部评论({{total}})</div>
		</div>
		<div class="detail-content-body1-comment">
			<div class="mui-content mui-scroll-wrapper" id="commentMore">
				<div class="mui-scroll">
					<div class="forum-comment-list">
						<div class="forum-comment-list-item" v-for="(item, index) in list" @tap="commentItem(item.comment)">
							<div>
								<img src="../../static/img/icon/denglu_gengxin_icon/logo_denglu@2x.png"/>
							</div>
							<div>
								<div class="item-title">{{item.user_name}}</div>
								<div class="item-date">{{item.time}}</div>
								<div class="item-huifu" v-if="item.type == 2">
									回复{{item.pcUserName}}：{{item.content}}
								</div>
								<div class="item-huifu" v-else>
									{{item.content}}
								</div>
								<div class="item-item-child" v-if="item.type == 2">
									{{item.pcUserName}}：{{item.pContent}}
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="fixed">
			<input type="text" name="" id="" v-model="content" :placeholder="commonName"/>
			<div @tap="release">发表</div>
		</div>
		<v-common :dialog="show" :id='id' @hide="hide" @submit="submit" :placeholder="commonName"></v-common>
	</div>
</template>

<script>
	import {getData} from '../service/getData'
	import VCommon from '../base/v-common'
	export default {
		data() {
			return {
				list: [],
				commonName: '我也来评论两句',
				show: false,
				id: null,
				content: '',
				lastPage: 1,
				page: 1,
				total: 1
			}
		},
		components: {
			VCommon
		},
		methods: {
			init() {  //默认加载
				getData('/comment/appCommentList', {
					noteType: this.$route.query.type,
					page: 1,
					pdId: this.$route.params.id
				}).then(d => {
					d.object.list.map(x => {
						let date = new Date(x.time)
						x.time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds();
					})
					this.list = d.object.list
					this.lastPage = d.object.lastPage
					this.total = d.object.total
				})
			},
			release() {  //评论
				getData('/comment/appAddComment', {
					token: sessionStorage.token,
					content: this.content,
					pdId: this.$route.params.id,
					noteType: this.$route.query.type,
				}).then(d => {
					this.$store.state.isLoading = false
					if(d.code == 100) {
						this.show = false
						mui.toast(d.object)
						this.$router.go()
					} else {
						mui.toast(d.msg)
					}
				})	
			},
			hide() {  //隐藏
				this.show = false
			},
			commentItem(item) {  //子评论
				this.commonName = "回复" + item.userName + ":"
				this.id = item.comId
				this.show = true
			},
			submit(content, id) {  //评论
				this.$store.state.isLoading = true
				if(id != null) {
					getData('/comment/appReturnCommnet', {
						token: sessionStorage.token,
						content: content,
						cId: id
					}).then(d => {
						this.$store.state.isLoading = false
						if(d.code == 100) {
							this.show = false
							this.$router.go()
						} else {
							mui.toast(d.msg)
						}
					})
				} else {
					getData('/comment/appAddComment', {
						token: sessionStorage.token,
						content: content,
						pdId: this.info.note_id,
						noteType: this.info.note_type
					}).then(d => {
						this.$store.state.isLoading = false
						if(d.code == 100) {
							this.show = false
							mui.toast(d.object)
							this.info.comment_count ++
						} else {
							mui.toast(d.msg)
						}
					})											
				}
			},
			pullupRefresh() {  //上拉加载
				if(this.lastPage != this.page) {
					getData('/comment/appCommentList', {
						noteType: this.$route.query.type,
						page: this.page++,
						pdId: this.$route.params.id
					}).then(d => {
						mui('#commentMore').pullRefresh().endPullupToRefresh();	
						d.object.list.map(x => {
							let date = new Date(x.comment.time)
							x.comment.time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds();
						})
						this.list = this.list.concat(d.object.list)
					})
				} else {
					mui('#commentMore').pullRefresh().endPullupToRefresh(true);					
				}
			},
			pulldownRefresh() { //下拉刷新
				getData('/comment/appCommentList', {
					noteType: this.$route.query.type,
					page: 1,
					pdId: this.$route.params.id
				}).then(d => {
					mui('#commentMore').pullRefresh().endPulldownToRefresh();
					d.object.map(x => {
						let date = new Date(x.comment.time)
						x.comment.time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours()+ ':' +date.getMinutes()+ ':' +date.getSeconds();
					})
					this.list = d.object
				})
			}
		},
		mounted() {
			this.init()
			this.$nextTick(() => {
				mui.init({
	                pullRefresh: {
	                    container: '#commentMore',
	                    up: {//上拉加载
	                    	height: 40,
	                        auto:false,//可选,默认false.自动上拉加载一次
	                        contentrefresh: '正在加载...',
	                        contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
	                        callback: this.pullupRefresh
	                    },
						down: {                        
							contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容                        
							contentrefresh: "正在刷新…", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容                        
							auto: false,//可选,默认false.首次加载自动下拉刷新一次                        
							callback: this.pulldownRefresh                   
						}
	                }
	            });
			})
		},
		created() {
			//处理mui下拉加载的bug
			for(var i = mui.hooks.inits.length-1,item;i>=0;i--){
				item=mui.hooks.inits[i];
				if(item.name=="pullrefresh"){
				    item.repeat=true;
				}
			}
		},
	}
</script>

<style scoped lang="less">
	#commentMore {
		margin-top: 95px;
	}
	
	.more-header {
		display: flex;
		padding: 10px;
		border-bottom: 5px solid #eee;
		align-items: center;
		background: #fff;
		
		img {
			width: 25px;
			height: 20px;
			margin-right: 10px;
		}
		
		div {
			font-size: 13px;
		}
	}
	
	.detail-content-body1-comment {
		font-size: 12px;
		border-bottom: 1px solid #eee;
		background: #fff;
		margin-bottom: 50px;
				
		.forum-comment-list-item {
			background: #fff;
			display: flex;
			padding: 10px;
			border-bottom: 1px solid #EEEEEE;
			
			div:nth-child(1) {
				img {
					width: 40px;
					height: 40px;
					margin-right: 10px;
				}					
			}
			
			div:nth-child(2) {
				flex: 1;
				
				.item-title {
					color: #c9eb59;
					margin-bottom: 5px;
				}
				
				.item-date {
					color: #7B7B7B;
					margin-bottom: 5px;
				}
				
				.item-huifu {
					margin-bottom: 5px;
				}
				
				.item-item-child {
					padding: 10px;
					background: #E5E5E5;
				}
			}
		}
	}
	
	.fixed {
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 5px 10px;
		border-top: 1px solid #eee;
		align-items: center;
		
		input {
			margin: 0;
			margin-right:10px;
			font-size: 12px;
			padding: 0 10px;
			height: 30px;
		}
		
		div {
			width: 20%;
			display: flex;
			background-color: #222222;
			color: #fff;
			padding: 5px 0;
			border-radius: 5px;
			justify-content: center;
		}
	}
	
</style>